<template>
	<view>
		<view style="z-index: 1;">
			<image :src="$utils.getPic(data.coverImg)" class="w-percentage-100 h-200" mode="aspectFill"></image>
		</view>
		<view class="position-absolute bg-white radius-16  w-full" style="z-index: 10; margin-top: -20px;">
			<view class="p-16">
				<autioPages :src="str.url"></autioPages>
				<view class="fs-18 pt-12">{{data.title}}</view>
				<view class="flex-y-center fs-12 cl-999 py-4">
					<image src="/static/image/shiz.png" class="w-14 h-14 mr-4"></image>{{data.type == 0?'展览展厅':'馆藏文物'}}
					<image src="/static/image/shiz.png" class="w-14 h-14 ml-30 mr-4 "></image>{{data.address||'博物馆'}}
				</view>
				<view style="text-indent: 20px;" class="py-16 content position-relative pb-36   ">
					<text class="text " :class="!isExpanded?'line-3 ':''">
						{{data.content}}
					</text>
	
					<view class="toggle-btn position-absolute bottom-0 w-full flex-x-center pb-12" @click="toggleExpand">
					  {{ isExpanded ? '收起' : '查看全部介绍' }}
					</view>
				</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	import autioPages from '@/components/audio-cc/audio-cc.vue'
	export default {
		components:{
			autioPages
		},
		data() {
			return {
				data:{},
				list:[],
				id:'',
				str:{
					url:'http://st9hxhc9t.hd-bkt.clouddn.com/fileyp1.mp3',
				},
				isExpanded:false, //是否展开
			}
		},
		onLoad(option) {
			this.id = option.id
			this.init()
		},
		methods: {
			init(){
				this.$rqt.getMuseumOne({
					Id:this.id
				}).then((res) => {
					if (res.code == 200) {
						this.data = res.data
						uni.hideLoading()
					}
					uni.hideLoading()
				})
			},
			handleChangePlayStatus(){
				console.log("bofamh")
			},
			toggleExpand() {
			  this.isExpanded = !this.isExpanded;
			},
			toDetailChilde(item){
				uni.navigateTo({
					url:'/pages/indexOther/showRooomChild?id='+item.id
				})
			}
			
			
			// http://10.40.92.93:8084/api/getMuseumOne?Id=5cd3edc5-5078-47db-b5ad-ffb6f04870e2
			
		}
	}
</script>

<style lang="scss">
	.line-3 {
	  display: -webkit-box; /* 将元素设置为弹性盒子 */
	  -webkit-box-orient: vertical; /* 设置盒子内容垂直排列 */
	  -webkit-line-clamp: 3; /* 限制显示的行数 */
	  overflow: hidden; /* 超出部分隐藏 */
	  text-overflow: ellipsis; /* 超出部分显示省略号 */
	  line-height: 1.5; /* 行高，确保文本显示美观 */
	}

 .toggle-btn {
	      font-size: 26rpx;
	      color: #e64340;
	    }
</style>
